import React, { useEffect, useState } from 'react';
import './deletewalletdialog.css'
import icon_wallet_notify from '@/assets/icon_wallet_notify.png'
import icon_close from '@/assets/icon_close.png'
import { Mask } from 'antd-mobile';

export default function DeleteWalletDialog({ visible, onConfirm, onClose, walletInfo = {} }) {

    const [needDisplay, setNeedDisplay] = useState(false);

    //监听
    useEffect(() => {
        setNeedDisplay(visible)
    }, [visible])

    const onHandleCancelClick = () => {
        onClose && onClose()
    }

    const onHandleConfimrClick = () => {
        let wid = walletInfo.id
        onConfirm && onConfirm(wid)
    }

    return (
        <Mask visible={needDisplay} opacity={0.6}
            onMaskClick={() => { }}>
            <div className="deleteWalletDialogOverlayBg">
                <div className="deleteWalletDialogOverlayContent">

                    <img className="deleteWalletDialogOverlayIcon" src={icon_wallet_notify} alt="" />

                    <div className="deleteWalletDialogOverlayContentRowHeaderCenter">
                        <span className='deleteWalletDialogOverlayTitle'>Êtes-vous sûr de vouloir supprimer ce portefeuille électronique mobile ?</span>
                        <img className="deleteWalletDialogOverlayIconClose" src={icon_close} alt="" onClick={onHandleCancelClick} />
                    </div>

                    <div className="deleteWalletDialogWalletContent">
                        <img className="deleteWalletDialogWalletLogo" src={walletInfo.walletLogo} alt="" />
                        <div className='deleteWalletDialogWalletTypeContent'>
                            <span className="deleteWalletDialogWalletType">{walletInfo.type}</span>
                            <span className="deleteWalletDialogWalletMobile">{walletInfo.walletMobile}</span>
                        </div>
                    </div>

                    <div className='deleteWalletDialogOverlayLine'></div>

                    <div className="deleteWalletDialogOverlayButtonContent" >
                        <div className='deleteWalletDialogOverlayConfirmContent' onClick={onHandleCancelClick}>
                            Annuler
                        </div>

                        <div className='deleteWalletDialogOverlayConfirmContent' onClick={onHandleConfimrClick}>
                            Soumettre
                        </div>
                    </div>
                </div>
            </div>
        </Mask >
    );
};
